<template>
  <el-table :data="CoreData" style="width: 100%" @row-click="handleRowClick">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="stationName" label="充电站名" width="100" />
    <el-table-column prop="address" label="充电站地址" />
    <el-table-column label="是否免费停车" #default="scope">
      <span>{{scope.row.parkFee?"是":"否"}}</span>
    </el-table-column>
    <el-table-column label="是否有休息室" #default="scope">
      <span>{{scope.row.lounge?"是":"否"}}</span>
    </el-table-column>
    <el-table-column label="是否有卫生间" #default="scope">
      <span>{{scope.row.toilet?"是":"否"}}</span>
    </el-table-column>
    <el-table-column  label="是否有商场" #default="scope">
      <span>{{scope.row.shoppingMall?"是":"否"}}</span>

    </el-table-column>
    <el-table-column  label="是否有洗车" #default="scope" >
      <span>{{scope.row.washCar?"是":"否"}}</span>
    </el-table-column>
    <el-table-column prop="washFee" label="洗车费用" />
    <el-table-column prop="businessStartTime" label="营业开始时间" :formatter="formatTime" />
    <el-table-column prop="businessEndTime" label="营业结束时间" :formatter="formatTime" />
    <el-table-column prop="longitude" label="经度" />
    <el-table-column prop="latitude" label="纬度" />
    <el-table-column label="状态" #default="scope">
      <span>{{ getStatusText(scope.row.status) }}</span>
    </el-table-column>
    <el-table-column label="操作" #default="scope">
        <el-button @click.stop="handleDelete(scope.row)">删除</el-button>
      <el-button @click.stop="handleGunAll(scope.row)">充电枪</el-button>
    </el-table-column>
  </el-table>



  <el-dialog v-model="dialogVisible" title="修改信息." width="800">
    <el-form :model="selectedRow" label-width="auto" style="max-width: 600px">
      <el-form-item label="充电站名">
        <el-input v-model="selectedRow.stationName" />
      </el-form-item>
      <el-form-item label="充电站名">
        <el-input v-model="selectedRow.address" />
      </el-form-item>
      <el-form-item label="是否免费停车">
        <el-radio-group v-model="selectedRow.parkFee">
          <el-radio :value="0" size="large">是</el-radio>
          <el-radio :value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有休息室">
        <el-radio-group v-model="selectedRow.lounge">
          <el-radio :value="0" size="large">是</el-radio>
          <el-radio :value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有卫生间">
        <el-radio-group v-model="selectedRow.toilet">
          <el-radio :value="0" size="large">是</el-radio>
          <el-radio :value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有商场">
        <el-radio-group v-model="selectedRow.shoppingMall">
          <el-radio :value="0" size="large">是</el-radio>
          <el-radio :value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有洗车">
        <el-radio-group v-model="selectedRow.washCar">
          <el-radio :value="0" size="large">是</el-radio>
          <el-radio :value="1" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="洗车费用">
        <el-input-number v-model="selectedRow.washFee" :min="0" :max="100" />
      </el-form-item>

      <el-form-item label="营业开始时间">
        <el-time-picker v-model="selectedRow.businessStartTime" placeholder="请选择时间"
          value-format="HH:mm:ss"/>
      </el-form-item>
      <el-form-item label="营业结束时间">
        <el-time-picker v-model="selectedRow.businessEndTime" placeholder="请选择时间" value-format="HH:mm:ss"/>
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="selectedRow.longitude" />
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="selectedRow.latitude" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectedRow.status" placeholder="选择状态">
          <el-option label="空闲中" :value="0"></el-option>
          <el-option label="使用中" :value="1"></el-option>
          <el-option label="维护中" :value="2"></el-option>
          <el-option label="已报废" :value="3"></el-option>
          <el-option label="调试中" :value="4"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="CoreUpdate">确 定</el-button>
    </span>
  </el-dialog>


<!--  充电器信息-->
  <el-dialog v-model="dialogVisibleGun" title="充电枪信息." width="680">
    <el-table :data="tableGunData" border style="width: 100%">
      <el-table-column prop="gunNo" label="充电枪编号" width="100" />
      <el-table-column prop="gunName" label="充电枪名" width="150" />
      <el-table-column  label="类型"  #default="scope" width="80">

          <span v-if="scope.row.gunType===0">快充</span>
          <span v-else-if="scope.row.gunType===1">慢充</span>
      </el-table-column>
      <el-table-column prop="gunPower" label="功率" width="80" />

      <el-table-column label="状态" #default="scope" width="80" >
        <span>{{ getStatusText(scope.row.status) }}</span>
      </el-table-column>

      <el-table-column label="操作" #default="scope" width="160">
        <el-button @click.stop="handleGunDel(scope.row)">删除</el-button>
        <el-button @click.stop="handleGunUpdate(scope.row)">修改</el-button>
      </el-table-column>
    </el-table>
  </el-dialog>



  <!--  充电枪修改-->
  <el-dialog v-model="dialogVisibleGunUpdate" title="充电枪修改." width="680">
    <el-form :model="selectedGunRow" label-width="auto" style="max-width: 600px">
      <el-form-item label="充电站编号" disabled=true>
        <el-input v-model="selectedGunRow.gunNo" />
      </el-form-item>
      <el-form-item label="充电站名称">
        <el-input v-model="selectedGunRow.gunName" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="selectedGunRow.gunType" placeholder="选择状态">
          <el-option label="快充" :value="0"></el-option>
          <el-option label="慢充" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="功率">
        <el-input-number v-model="selectedGunRow.gunPower" :min="20" :max="100" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectedGunRow.status" placeholder="选择状态">
          <el-option label="空闲中" :value="0"></el-option>
          <el-option label="使用中" :value="1"></el-option>
          <el-option label="维护中" :value="2"></el-option>
          <el-option label="已报废" :value="3"></el-option>
          <el-option label="调试中" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibleGunUpdate = false">取 消</el-button>
      <el-button type="primary" @click="CoreGunUpdate">确 定</el-button>
      </span>
    </el-form>


  </el-dialog>





  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="coreForm.pageNum"
        v-model:page-size="coreForm.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="coreForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {
  GetAdminCoreAll,
  GetAdminCoreDel,
  GetAdminCoreGunAll,
  GetAdminCoreGunDel, GetAdminCoreGunUpdate,
  GetAdminCoreUpdate
} from "@/api/core/core.js";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const coreForm=ref({
  pageNum:1,
  pageSize:10,
  total:0
})

const CoreData =ref([])
const dialogVisible = ref(false);
const dialogVisibleGun=ref(false);
const dialogVisibleGunUpdate=ref(false);

const tableGunData=ref({})
const selectedGunRow=ref({})

const selectedRow = ref({
  businessStartTime: "", // 示例时间
  businessEndTime: "",   // 示例时间
});
const getStatusText = (status) => {
  const statusMap = {
    0: "空闲中",
    1: "使用中",
    2: "维护中",
    3: "已报废",
    4: "调试中"
  };
  return statusMap[status] || "未知状态"; // 如果状态未找到，默认返回"未知状态"
};
function GetSelectCore() {
  GetAdminCoreAll(coreForm.value).then(res => {
    CoreData.value = res.data.data.records
    coreForm.value.total=res.data.data.total
  })
}
GetSelectCore()

// 处理行点击事件
const handleRowClick = (row) => {
  selectedRow.value = row; // 设置选中的行数据
  console.log(row)
  dialogVisible.value = true; // 显示弹框

};




//修改充电站信息
function CoreUpdate(){
  console.log(selectedRow.value)
  GetAdminCoreUpdate(selectedRow.value).then(res => {
    console.log(res)
    if (res.data.code==200000) {
      GetSelectCore()
      dialogVisible.value = false;
    }
  })

}


//分页
const handleSizeChange = (val) => {
  coreForm.value.pageSize=val
  GetSelectCore()
}
const handleCurrentChange = (val) => {
  coreForm.value.pageNum=val
  GetSelectCore()
}

//删除操作
function handleDelete(val){
  ElMessageBox.confirm(
      '是否确认删除',
      '提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(()=>{
    GetAdminCoreDel(val).then(res=>{
      console.log(res)
      if (res.data.code==200000) {
        ElMessage.success('删除成功')
        GetSelectCore()
      }else{
        ElMessage.error('删除失败')
      }
    })
  })
}



//查询充电枪信息
function handleGunAll(row){

  GetAdminCoreGunAll(row).then(res=>{
    console.log(res)
    tableGunData.value=res.data.data
    if (res.data.code==200000){
      dialogVisibleGun.value=true

    }
  })

}
//充电器删除操作
function handleGunDel(row){
  GetAdminCoreGunDel(row).then(res=>{
    console.log(res)
    if (res.data.code==200000){
      ElMessage.success('删除成功')
      dialogVisibleGun.value=false
    }else{
      ElMessage.error('删除失败')
    }
  })
}
//修改弹框
function handleGunUpdate(row){
  console.log(row)
  selectedGunRow.value= row
  dialogVisibleGunUpdate.value=true
}


//修改操作
function CoreGunUpdate(row){

  GetAdminCoreGunUpdate(selectedGunRow.value).then(res=>{
    console.log(res)
    if (res.data.code==200000){
      ElMessage.success('修改成功')
      dialogVisibleGunUpdate.value=false
    }else{
      ElMessage.error('修改失败')
    }
  })

}
</script>

